<!-- 考场设置 -->
<template>
    <div>
        <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
            <el-row :gutter="24" style="height: 50px;">
                <!-- 校区 -->
                <el-col :span="8">
                    <el-form-item :label="$t('examinationSetting.campus')" prop="campus">
                        <el-select v-model="queryForm.condition.campus" clearable filterable style="width:100%">
                            <el-option
                                v-for="item in options.campus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{$t('examinationSetting.examinationList')}}</h1>
            <el-row style="padding:10px;" class="row-bg" justify="space-between">
                <div>
                    <el-button style="float:right; margin-left:10px;" @click="exported">{{$t('examinationSetting.exported')}}</el-button>
                    <el-button style="float:right; margin-left:10px;" @click="deleted">{{$t('examinationSetting.deleted')}}</el-button>
                    <el-button type="primary" style="float:right; margin-left:10px;" @click="add">{{$t('examinationSetting.add')}}</el-button>
                </div>
            </el-row>
            <edu-table :pagination="false" :selection='true' :order="true" :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
                <edu-table-column :label="$t('examinationSetting.examinationName')" prop="examinationName"></edu-table-column> <!-- 考场名称 -->
                <edu-table-column :label="$t('examinationSetting.examinationPlaces')" prop="examinationPlaces"></edu-table-column> <!-- 考场地点 -->
                <edu-table-column :label="$t('examinationSetting.campus')" prop="campus"></edu-table-column> <!-- 校区 -->
                <edu-table-column :label="$t('examinationSetting.examinationPeople')" prop="examinationPeople"></edu-table-column> <!-- 考场人数 -->
                <!-- 操作 -->
                <edu-table-column :label="$t('examinationSetting.operation')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="check(scope.row)">{{ $t('examinationSetting.check') }}</el-button>
                        <el-button type="text" @click="modify(scope.row)">{{ $t('examinationSetting.modify') }}</el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog :title="title" :before-close="cancel" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="form" label-position="right" label-suffix="：" label-width="150px">
                <!-- 考场名称 -->
                <el-form-item :label="$t('examinationSetting.examinationName')" prop="examinationName">
                    <el-input :disabled="titleData == '查看'" v-model="form.examinationName" clearable style="width:50%" :placeholder="$t('examinationSetting.pleaseEnter')"></el-input>
                </el-form-item>
                <!-- 校区 -->
                <el-form-item :label="$t('examinationSetting.campus')" prop="campus">
                    <el-select :disabled="titleData == '查看'" v-model="form.campus" clearable filterable style="width:50%">
                        <el-option
                            v-for="item in options.campus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 教学楼 -->
                <el-form-item :label="$t('examinationSetting.academicBuilding')" prop="academicBuilding">
                    <el-select :disabled="titleData == '查看'" v-model="form.academicBuilding" clearable filterable style="width:50%">
                        <el-option
                            v-for="item in options.academicBuilding"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 教室 -->
                <el-form-item :label="$t('examinationSetting.room')" prop="room">
                    <el-select :disabled="titleData == '查看'" v-model="form.room" clearable filterable style="width:50%">
                        <el-option
                            v-for="item in options.room"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 考场人数 -->
                <el-form-item :label="$t('examinationSetting.examinationPeople')" prop="examinationPeople">
                    <el-input :disabled="titleData == '查看'" v-model="form.examinationPeople" clearable style="width:50%" :placeholder="$t('examinationSetting.pleaseEnter')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">{{ $t('examinationSetting.cancel') }}</el-button>
                <el-button type="primary" @click="determine('form')">{{ $t('examinationSetting.determine') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
export default {
    components: {

    },
    data() {
        return {
            queryForm: {
                pageNum_: 1,
                pageSize_: 10,
                total_: 0,
                condition: {
                    campus: '' // 校区
                }
            },
            dataList: [
                {
                    examinationName: '考场名称-示例',
                    examinationPlaces: '考场地点-北1区',
                    campus: '四平路校区',
                    examinationPeople: 60
                }
            ],
            multipleSelection: [],
            dialogFormVisible: false,
            title: '',
            titleData: '',
            form: {
                examinationName: '',
                campus: '',
                academicBuilding: '',
                room: '',
                examinationPeople: ''
            },
            options: {
                campus: [], // 校区
                academicBuilding: [
                    { value: 1, label: '逸夫教学楼' },
                    { value: 2, label: '邵逸夫教学楼' }
                ], // 教学楼
                room: [] // 教室
            },
            rules: {
                examinationName: [
                    { required: true, message: this.$t('examinationSetting.pleaseEnter'), trigger: 'blur' }
                ],
                campus: [
                    { required: true, message: this.$t('examinationSetting.pleaseSelect'), trigger: 'change' }
                ],
                academicBuilding: [
                    { required: true, message: this.$t('examinationSetting.pleaseSelect'), trigger: 'change' }
                ],
                room: [
                    { required: true, message: this.$t('examinationSetting.pleaseSelect'), trigger: 'change' }
                ]
            }
        }
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        // 重置
        resetSearch() {

        },
        // 筛选
        onSearch() {

        },
        // 新增
        add() {
            this.title = this.$t('examinationSetting.addExamination')
            this.titleData = '新增'
            this.dialogFormVisible = true
        },
        // 删除
        deleted() {

        },
        // 导出
        exported() {

        },
        // 查看
        check() {
            this.title = this.$t('examinationSetting.checkExamination')
            this.titleData = '查看'
            this.dialogFormVisible = true
        },
        // 修改
        modify() {
            this.title = this.$t('examinationSetting.modifyExamination')
            this.titleData = '修改'
            this.dialogFormVisible = true
        },
        // 勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 分页
        handleSizeChange() {

        },
        // 分页
        handleCurrentChange() {

        },
        // 弹框内的取消
        cancel(form) {
            this.form = { }
            this.$refs['form'].resetFields()
            this.dialogFormVisible = false
        },
        // 弹框内的确定
        determine(form) {
            this.$refs[form].validate((item) => {
                if (item) {
                    alert('okkkkkk')
                } else {
                    return false
                }
            })
        },
        getOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [ "X_XQ" ]
            };
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        campus : "X_XQ" // 校区
                    },
                    res.data,
                    this.options
                )
            })
        },
    },
}
</script>
<style lang="scss" scoped>

</style>